<template>
  <mu-flex direction="column" style="height: 100%;">
    <!--顶部-->
    <MainHeader title="个人设置" :empty="true" :hasreturn="true"/>

    <mu-container>
      <div class="setting-form">
        <mu-form :model="user" ref="form">
          <mu-form-item label="姓名" :rules="[notEmptyRule, chineseRule]" prop="name">
            <mu-text-field v-model="user.name" placeholder="姓名"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="密码">
            <mu-text-field v-model="user.password" placeholder="密码"
                           :action-icon="pwdShow ? 'visibility_off' : 'visibility'"
                           :action-click="() => pwdShow = !pwdShow"
                           :type="pwdShow ? 'text' : 'password'"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="确定密码" :rules="[twoPwdRule]" prop="password2">
            <mu-text-field v-model="user.password2" placeholder="密码"
                           :action-icon="pwdShow2 ? 'visibility_off' : 'visibility'"
                           :action-click="() => pwdShow2 = !pwdShow2"
                           :type="pwdShow2 ? 'text' : 'password'"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="电话" :rules="[notEmptyRule, telRule]" prop="tel">
            <mu-text-field v-model="user.tel" placeholder="电话" max-length="11"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="QQ号" :rules="[notEmptyRule]" prop="qq">
            <mu-text-field v-model="user.qq" placeholder="QQ号" max-length="11"></mu-text-field>
          </mu-form-item>

          <div class="form-item">
            <mu-button @click="submit" full-width color="teal">保存</mu-button>
          </div>
        </mu-form>
      </div>
    </mu-container>
  </mu-flex>
</template>

<script>
  import MainHeader from './MainHeader'
  import {mapMutations, mapState, mapActions} from 'vuex'
  import $http from '@/store/ajax'

  export default {
    name: "DoAdvise",
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.showNav(false)
      })
    },
    beforeRouteLeave(to, from, next) {
      this.showNav(true);
      next()
    },
    components: {
      MainHeader
    },
    computed: {
      ...mapState(['user'])
    },
    data() {
      return {
        pwdShow: false,
        pwdShow2: false,
        telRule: {validate: (val) => /^1[34578]\d{9}$/.test(val), message: '电话号码格式不正确！'},
        twoPwdRule: {validate: (val) => this.user.password === '' || this.user.password === val, message: '两次密码不一致！'},
        notEmptyRule: {validate: (val) => val != null && val.trim().length > 0, message: '必填项不能为空！'},
        chineseRule: {validate: (val) => val == null || /^[\u4e00-\u9fa5]+$/.test(val), message: '姓名只能为中文！'},
        le300Rule: {validate: (val) => val.length >= 15 && val.length <= 300, message: '最短15字，最长300字！'}
      }
    },
    methods: {
      ...mapMutations(['showNav']),
      ...mapActions(['updateSession', 'doLogout']),
      submit() {
        let self = this;
        let u = {...this.user};
        delete u.loginTime;
        delete u.status;
        this.$refs.form.validate().then((result) => {
          if (result) {
            $http.post('/api/change', u).then((data) => {
              if (data.success) {
                if (u.password !== '') {
                  self.doLogout();
                  self.$toast.success("密码已重置，请重新登录！");
                  self.$router.back()
                } else {
                  self.updateSession(u);
                  self.$toast.success("保存成功！")
                }
              } else {
                self.$toast.warning("失败：" + data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .setting-form {
    padding: 14px 5px;
  }

  .mu-form-item {
    margin-bottom: 12px;
  }

  .form-item {
    margin: 12px 0;
  }
</style>
